<template>
  <a-dropdown v-if="$store.getters.userInfo.username !== null" placement="bottomRight">
    <span class="ant-pro-account-avatar">
      <a-avatar size="small" :src="preUrl + $store.getters.userInfo.avatar" class="antd-pro-global-header-index-avatar" />
      <span>{{ $store.getters.userInfo.username }}</span>
    </span>
    <template v-slot:overlay>
      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
          <a-icon type="setting" />
          个人中心
        </a-menu-item>
        <a-menu-divider v-if="menu" />
        <a-menu-item key="logout" @click="handleLogout">
          <a-icon type="logout" />
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <span v-else>
    <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
  </span>
</template>

<script>
  import { Modal } from 'ant-design-vue'

  export default {
    name: 'AvatarDropdown',
    data () {
      return {
        preUrl: '/api/file/download/image/',
        defaultImage: 'default.jpg'
      }
    },
    created () {
      if (this.$store.getters.userInfo.avatar === null) {
        this.$store.getters.userInfo.avatar = this.defaultImage
      }
    },
    props: {
      menu: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleToCenter () {
        this.$router.push({ path: '/account/center' })
      },
      handleToSettings () {
        this.$router.push({ path: '/selfCenter' })
      },
      handleLogout (e) {
        Modal.confirm({
          title: this.$t('layouts.usermenu.dialog.title'),
          content: this.$t('layouts.usermenu.dialog.content'),
          onOk: () => {
            // return new Promise((resolve, reject) => {
            //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
            // }).catch(() => console.log('Oops errors!'))
            return this.$store.dispatch('Logout').then(() => {
              this.$router.push({ name: 'login' })
            })
          },
          onCancel () {}
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .ant-pro-drop-down {
    /deep/ .action {
      margin-right: 8px;
    }
    /deep/ .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }
</style>
